/* reset */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td,
header,
section,
aside,
nav,
menu,
hgroup,
audio,
video,
figure,
figcaption,
footer,
article {
    margin: 0;
    padding: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var,
optgroup {
    font-style: inherit;
    font-weight: inherit;
}

body,
input,
button,
textarea,
select {
    *font-size: 100%;
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

fieldset,
img {
    border: 0;
}

caption,
th {
    text-align: left;
}

textarea {
    resize: none;
    outline: none;
}

input {
    -webkit-appearance: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

em {
    font-style: normal;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

body {
    background:#000;
    font: normal 20px/1.5 -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

html,
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    height: 100%;
    overflow:hidden;
}
.V-section,.V-page{
    /*max-width:750px;*/
    margin:0 auto;
    height:100%;
    overflow:hidden;
    position:relative;
}
.V-page.index{
    background: -webkit-radial-gradient(top left, circle, #000019 20%, #0c1342 70%);
    background-size:100% auto;
}
.V-page.index .round{
    -webkit-animation:round 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) ;
    width:18rem;
    height:6rem;
    top:9.64rem;
    margin-left:-9rem;
    left:50%;
    position:absolute;
    -webkit-transform:translateY(0);
    display:none;
}
.V-page.index .round .back{
    -webkit-animation:roundBg 2.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    background:#fbb5e0;
    height:100%;
    -webkit-transform-origin:50% 0%;
    border-radius:100%;
}
@-webkit-keyframes round{
    0%{ -webkit-transform:translateY(4rem); opacity:0;}
    50%{ opacity:1;}
}
@-webkit-keyframes roundBg{
    0%{ -webkit-transform:scaleX(.2);}
}
.V-page.index .round .btn{
    background:url(../images/btn.png) no-repeat;
    background-size:100% auto;
    width:3.26rem;
    height:.86rem;
    position:absolute;
    top:.9rem;
    left:50%;
    margin-left:-1.63rem;
}
.V-leaf.one{
    position:absolute;
    left:0;
    top:3.55rem;
    z-index:5;
}
.M-leaf.one{
    -webkit-animation:leafRoot_1 4s ease-in-out infinite;
    -webkit-transform-origin:0% 0%;
    background:url(../images/leaf.png) no-repeat;
    background-size:3rem auto;
    width:3rem;
    height:1.44rem;
}
@-webkit-keyframes leafRoot_1{
    50%{ -webkit-transform:rotate(8deg);}
}
.M-leaf.one .piece{
    background:url(../images/leaf.png) no-repeat;
    background-size:3rem auto;
    position:absolute;
}
.M-leaf.one .piece:nth-child(1){
    -webkit-animation:leafPiece_1 4s ease-in-out infinite .5s;
    -webkit-transform-origin:0% 0%;
    background-position:0 -1.54rem;
    width:0.42rem;
    height:0.48rem;
    left:1.56rem;
    top:.5rem;
}
@-webkit-keyframes leafPiece_1{
    50%{ -webkit-transform:rotate(20deg);}
}
.M-leaf.one .piece:nth-child(2){
    -webkit-animation:leafPiece_2 3s ease-in-out infinite .5s;
    -webkit-transform-origin:.01rem 0%;
    background-position:-0.54rem -1.54rem;
    width:0.16rem;
    height:0.64rem;
    left:2.13rem;
    top:.68rem;
}
@-webkit-keyframes leafPiece_2{
    50%{ -webkit-transform:rotate(-10deg);}
}
.M-leaf.one .piece:nth-child(3){
    -webkit-animation:leafPiece_3 4s ease-in-out infinite 1s;
    -webkit-transform-origin:0% 0%;
    background-position:-0.88rem -1.54rem;
    width:0.36rem;
    height:0.44rem;
    left:2.48rem;
    top:.86rem;
}
@-webkit-keyframes leafPiece_3{
    50%{ -webkit-transform:rotate(18deg);}
}
.M-leaf.one .piece:nth-child(4){
    -webkit-animation:leafPiece_4 3.8s ease-in-out infinite .5s;
    -webkit-transform-origin:0% .08rem;
    background-position:-1.44rem -1.54rem;
    width:0.52rem;
    height:0.14rem;
    left:2.4rem;
    top:.7rem;
}
@-webkit-keyframes leafPiece_4{
    50%{ -webkit-transform:rotate(15deg);}
}
.M-leaf.one .piece:nth-child(5){
    -webkit-animation:leafPiece_5 3.4s ease-in-out infinite -0.5s;
    -webkit-transform-origin:0% .2rem;
    background-position:-2.08rem -1.54rem;
    width:0.64rem;
    height:0.16rem;
    left:1.96rem;
    top:.4rem;
}
@-webkit-keyframes leafPiece_5{
    50%{ -webkit-transform:rotate(-12deg);}
}


.V-leaf.two{
    position:absolute;
    left:0;
    top:2.72rem;
}
.M-leaf.two{
    -webkit-animation:leafRoot_2 6s ease-in-out infinite;
    -webkit-transform-origin:0% 100%;
    background:url(../images/leaf.png) no-repeat 0 -2.4rem;
    background-size:3rem auto;
    width:2.18rem;
    height:1.32rem;
}
@-webkit-keyframes leafRoot_2{
    50%{ -webkit-transform:rotate(6deg);}
}

.M-leaf.two .piece{
    background:url(../images/leaf.png) no-repeat;
    background-size:3rem auto;
    position:absolute;
}

.M-leaf.two .piece:nth-child(1){
    -webkit-animation:leafPiece_1 6s ease-in-out infinite .8s;
    -webkit-transform-origin:0% .1rem;
    background-position:-2.2rem -2.4rem;
    width:0.72rem;
    height:0.2rem;
    left:1.7rem;
    top:.388rem;
}
.M-leaf.two .piece:nth-child(2){
    -webkit-animation:leafPiece_6 5.4s ease-in-out infinite .8s;
    -webkit-transform-origin:0% 0%;
    background-position:-2.2rem -2.68rem;
    width:0.58rem;
    height:0.58rem;
    left:1.26rem;
    top:.62rem;
}
@-webkit-keyframes leafPiece_6{
    50%{ -webkit-transform:rotate(8deg);}
}
.M-leaf.two .piece:nth-child(3){
    -webkit-animation:leafPiece_6 6s ease-in-out infinite 1s;
    -webkit-transform-origin:0% 0%;
    background-position:-2.2rem -3.3rem;
    width:0.8rem;
    height:0.22rem;
    left:.6rem;
    top:1rem;
}
.M-leaf.two .piece:nth-child(4){
    -webkit-animation:leafPiece_2 5s ease-in-out infinite;
    -webkit-transform-origin:0% 100%;
    background-position:-2.2rem -3.58rem;
    width:0.46rem;
    height:0.68rem;
    left:0.9rem;
    top:0.1rem;
}
.M-leaf.two .piece:nth-child(5){
    -webkit-animation:leafPiece_1 6s ease-in-out infinite 1s;
    -webkit-transform-origin:0% 100%;
    background-position:-2.2rem -4.28rem;
    width:0.4rem;
    height:0.52rem;
    left:1.52rem;
    top:0.04rem;
}


.V-leaf.three{
    position:absolute;
    left:0;
    top:4.06rem;
}
.M-leaf.three{
    -webkit-animation:leafRoot_1 5s ease-in-out infinite .5s;
    -webkit-transform-origin:0% 0%;
    background:url(../images/leaf.png) no-repeat 0 -4.78rem;
    background-size:3rem auto;
    width:3rem;
    height:1.58rem;
}


.M-leaf.three .piece{
    background:url(../images/leaf.png) no-repeat;
    background-size:3rem auto;
    position:absolute;
}
.M-leaf.three .piece:nth-child(1){
    -webkit-animation:leafPiece_1 5s ease-in-out infinite 1s;
    -webkit-transform-origin:0% .04rem;
    background-position:-1.1rem -6.4rem;
    width:.36rem;
    height:.5rem;
    right:0;
    top:1rem;
}
.M-leaf.three .piece:nth-child(2){
    -webkit-animation:leafPiece_1 5s ease-in-out infinite 1.3s;
    -webkit-transform-origin:0% 0%;
    background-position:-1.48rem -6.4rem;
    width:.52rem;
    height:.14rem;
    right:-0.08rem;
    top:.86rem;
}
.M-leaf.three .piece:nth-child(3){
    -webkit-animation:leafPiece_4 5.4s ease-in-out infinite 1.6s;
    -webkit-transform-origin:0% 0%;
    background-position:-2.2rem -6.4rem;
    width:.4rem;
    height:.5rem;
    left:1.74rem;
    top:.56rem;
}
.M-leaf.three .piece:nth-child(4){
    -webkit-animation:leafPiece_7 4.5s ease-in-out infinite 1s;
    -webkit-transform-origin:0.12rem 0%;
    background-position:-2.8rem -6.4rem;
    width:.18rem;
    height:.62rem;
    right:0.54rem;
    top:.76rem;
}
@-webkit-keyframes leafPiece_7{
    50%{ -webkit-transform:rotate(-8deg);}
}
@-webkit-keyframes leafPiece_8{
    50%{ -webkit-transform:rotate(12deg);}
}
.M-leaf.three .piece:nth-child(5){
    -webkit-animation:leafPiece_8 5s ease-in-out infinite 1s;
    -webkit-transform-origin:0% 0%;
    background-position:0 -6.4rem;
    width:1.04rem;
    height:1.04rem;
    left:0.74rem;
    top:.04rem;
}

.V-leaf.one.rt{
    right:-1rem;
    left:auto;
    top:2.8rem;
    -webkit-transform:rotateY(-180deg) rotateZ(-40deg);
}
.V-leaf.one.rt .piece:nth-child(2){
    display:none;
}
.V-leaf.one.rt .piece:nth-child(1){
    left:1.5rem;
    top:.4rem;
}
.V-leaf.one.rt .piece:nth-child(5){
    left:1.8rem;
    top:.36rem;
}
.V-leaf.one.rt .piece:nth-child(4){
    left:2.56rem;
    top:.82rem;
}

.V-leaf.two.rt{
    right:0;
    left:auto;
    top:3.4rem;
    -webkit-transform:rotateY(-180deg) rotateZ(20deg);
}
.V-leaf.two.rt .piece:nth-child(3){
    left:.4rem;
    top:1rem;
}
.V-leaf.three.rt {
    right:-1.4rem;
    left:auto;
    top:4.4rem;
    -webkit-transform:rotateY(-180deg) rotateZ(-10deg) ;
}
.V-leaf.three.rt .piece:nth-child(5){
    display:none;
}
